<template>
  <div class="cq-con-brand w1160">
    <cq-title imgUrl="title-brand.png" title="橙品牌" imgWidth="391" imgHeight="86" />
    <ul class="cq-con-list flex flex-between">
      <li :class="item.liClassName" v-for="item in conListData" :key="item.liClassName">
        <div class="con-list-mask">
          <img :src="$utils.getImg(item.imgName)" width="90" height="90" alt="cyx" />
          <h3 class="c-fff fz28 fw200">橙营销</h3>
          <p class="c-da fz16">营销助力品牌升级</p>
          <btn-more :className="cqConList">了解更多</btn-more>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import CqTitle from './cq-title.vue'
import BtnMore from './btn-more'
export default {
  name: 'CqBrand',
  components: { CqTitle, BtnMore },
  data() {
    return {
      cqConList: ['btn-brand', 'bgc-white', 'toggle-show'],
      conListData: [
        {
          title: '橙营销',
          text: '营销助力品牌升级',
          liClassName: 'list-marketing',
          imgName: 'cyx.png'
        },
        {
          title: '橙营销',
          text: '营销助力品牌升级',
          liClassName: 'list-integral',
          imgName: 'cyx.png'
        },
        {
          title: '橙营销',
          text: '营销助力品牌升级',
          liClassName: 'list-financial',
          imgName: 'cyx.png'
        },
        {
          title: '橙营销',
          text: '营销助力品牌升级',
          liClassName: 'list-welfare',
          imgName: 'cyx.png'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.cq-con-brand {
  padding-top: 240px;
  padding-bottom: 148px;
}

.cq-con-title {
  text-align: center;
}

.cq-con-list {
  padding-top: 66px;
}

.cq-con-list {
  li {
    box-sizing: border-box;
    width: 280px;
    height: 400px;
    background: #fff url(@/assets/img/marketing.jpg) no-repeat center/cover;
    text-align: center;
    transition: 0.3s;
    &.list-integral {
      background-image: url(@/assets/img/integral.jpg);
    }
    &.list-marketing {
      background-image: url(@/assets/img/marketing.jpg);
    }
    &.list-welfare {
      background-image: url(@/assets/img/welfare.png);
    }
    img {
      padding-top: 108px;
    }
    h3 {
      padding-top: 38px;
      line-height: 28px;
    }
    p {
      padding-top: 13px;
      padding-bottom: 24px;
      line-height: 16px;
    }
    .con-list-mask {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.38);
    }
    &:hover {
      z-index: 1;
      position: relative;
      transform: scale(1.15, 1.13);
      padding: 8px 7px;
      box-shadow: 0 0 8px rgba(88, 88, 88, 0.9) inset;
      .con-list-mask {
        border: 1px solid #fff;
        background-color: rgba(255, 255, 255, 0);
      }
      .con-list-mask > p {
        color: #fff;
      }
      .toggle-show {
        display: inline-block;
      }
    }
  }
}
</style>
